<template>
  <!--  新增品质检验单  -->
  <div class="editPurchase" @click.stop="aotuTab=false">
    <div class="dropdown">
      <el-button size="mini" type="primary" @click="insert('A')">{{ $t('btn.save') }}</el-button>
    </div>
    <el-tabs v-model="activeName" class="tabs">
      <el-tab-pane :label="$t('market.info')" name="first">
        <el-form ref="purchaseRef" :model="prodValue" label-width="100px" size="mini">
          <el-form-item :label="$t('market.state')" prop="fdocumentStatus">
            <el-tag type="primary">
              {{ $t('market.create') }}<!--创建-->
            </el-tag>
          </el-form-item>
          <el-form-item :label="$t('market.billType')" prop="fbilltype">
            <el-input
              v-model.trim="prodValue.fbilltype"
              disabled
            />
          </el-form-item>
          <el-form-item :label="$t('market.billNo')">
            <el-input v-model="prodValue.fbillNo" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.fdate')" prop="fdate">
            <el-date-picker
              v-model="prodValue.fdate"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('market.checkDate')"
              style="width: 163px"
            />
          </el-form-item>
          <el-form-item :label="$t('market.checkouttype')">
            <el-input v-model="prodValue.fcheckouttype" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.dutydept')">
            <el-input v-model="prodValue.fdutydept">
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="departVisiblit=true"
              />
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('market.dutyer')">
            <el-input v-model="prodValue.fdutyer">
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="departRenVisiblit=true"
              />
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('market.note')" prop="fdescription">
            <el-input
              v-model.trim="prodValue.fdescription"
            />
          </el-form-item>
        </el-form>
        <div style="margin: 10px 0 5px;">
          <el-button size="mini" @click="newLine">{{ $t('btn.newHang') }}<!--新增行--></el-button>
          <el-button size="mini" @click="delHang">{{ $t('btn.delHang') }}<!--删除行--></el-button>
          <el-button size="mini" @click="batchFill">{{ $t('btn.batchFill') }}<!--批量填充--></el-button>
        </div>
        <div>
          <!--明细表格-->
          <jc-table
            :table-data="saleDetails"
            :table-header="tableHeader"
            serial
            :table-height="tableHeight"
            @cellClick="cellClick"
            @rowClick="rowClick"
          >
            <el-table-column type="selection" width="30px" sortable="true" align="center" />
            <el-table-column
              v-if="prodValue.fcheckouttype !== 'IQC'"
              :label="$t('menu.collect')"
              align="center"
              prop="fsrcbillno"
              width="130"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.fsrcbillno" size="mini">
                  <i
                    slot="suffix"
                    class="el-input__icon el-icon-search"
                    @click="scOrder(scope.$index)"
                  />
                </el-input>
              </template>
            </el-table-column>
            <el-table-column v-if="prodValue.fcheckouttype === 'IQC'" label="采购订单" prop="fsrcbillno" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.fsrcbillno" size="mini">
                  <i
                    slot="suffix"
                    class="el-input__icon el-icon-search"
                    @click="cgOrder(scope.$index)"
                  />
                </el-input>
              </template>
            </el-table-column>
            <el-table-column :label="$t('market.fmaterial')" align="center" width="150" prop="fnumber">
              <template slot-scope="scope">
                <el-input
                  v-model.trim="scope.row.fnumber"
                  size="mini"
                  @input="getAtuo(scope.$index, scope.row.fnumber)"
                >
                  <i
                    slot="suffix"
                    class="el-input__icon el-icon-search"
                    @click="materia(scope.$index)"
                  />
                </el-input>
                <div v-if="aotuTab && indexSelf === scope.$index" :class="indexSelf<7 ? 'tabPosit': 'tabPosit1'">
                  <number-code :fnumber="fnumber" @material="materialData" />
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('market.fmodel')" prop="fmodel" align="center" show-overflow-tooltip />
            <el-table-column :label="$t('shop.fname2')" prop="fname" align="center" show-overflow-tooltip />
            <el-table-column :label="$t('shop.fspecificaTion')" prop="fspecificaTion" align="center" show-overflow-tooltip />
            <el-table-column :label="$t('market.fdescripTion')" prop="fdescripTion" align="center" min-width="200" show-overflow-tooltip />
            <el-table-column :label="$t('market.checkunit')" prop="funit" align="center" />
            <el-table-column :label="$t('market.checkqty')" align="center" prop="fcheckqty">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.fcheckqty"
                  :min="0"
                  size="mini"
                />
              </template>
            </el-table-column>
            <el-table-column :label="$t('market.heqty')" align="center" prop="fheqty">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.fheqty"
                  :min="0"
                  size="mini"
                />
              </template>
            </el-table-column>
            <el-table-column :label="$t('market.checkway')" align="center" prop="fcheckwayid">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.fcheckwayid"
                  size="mini"
                  clearable
                  filterable
                >
                  <el-option v-for="item in storeData2" :key="item.fid" :label="item.fname" :value="item.fid" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column :label="$t('market.result')" align="center" prop="fresultid">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.fresultid"
                  size="mini"
                  clearable
                >
                  <el-option v-for="item in storeData" :key="item.fid" :label="item.fname" :value="item.fid" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column :label="$t('market.errReason')" align="center" width="120" property="freasonid">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.freasonid"
                  size="mini"
                  clearable
                >
                  <el-option v-for="item in storeData1" :key="item.fid" :label="item.fname" :value="item.fid" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column :label="$t('market.inWorkshop')" align="center" width="120" prop="fworkshop">
              <template slot-scope="scope">
                <el-autocomplete
                  v-model.trim="scope.row.fworkshop"
                  highlight-first-item
                  popper-class="my-autocomplete"
                  :fetch-suggestions="querySearch8"
                  size="mini"
                  @focus="getBasicUnit('SX_V_WORKSHOP', scope.$index)"
                  @select="selUnit"
                >
                  <i
                    slot="suffix"
                    class="el-input__icon el-icon-search"
                    @click="cliUnit('SX_V_WORKSHOP', scope.$index)"
                  />
                  <template slot-scope="{ item }">
                    <div class="name">{{ item.fname }}</div>
                  </template>
                </el-autocomplete>
              </template>
            </el-table-column>
            <el-table-column :label="$t('market.zedept')" align="center" width="120" prop="fzedept">
              <template slot-scope="scope">
                <el-input v-model="scope.row.fzedept" size="mini">
                  <i
                    slot="suffix"
                    class="el-input__icon el-icon-search"
                    @click="zrdept(scope.$index)"
                  />
                </el-input>
              </template>
            </el-table-column>
            <el-table-column :label="$t('market.cost')" align="center" width="50">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.fiscost" />
              </template>
            </el-table-column>
            <el-table-column :label="$t('market.productamount')" align="center" prop="fproducefamount">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.fproducefamount"
                  :min="0"
                  :disabled="!scope.row.fiscost"
                  size="mini"
                />
              </template>
            </el-table-column>
            <el-table-column :label="$t('market.paezText1')" align="center" width="120" prop="fpaeztext">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.fpaeztext"
                  size="mini"
                />
              </template>
            </el-table-column>
            <el-table-column :label="$t('market.note')" align="center" width="120" prop="fnote">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.fnote"
                  size="mini"
                />
              </template>
            </el-table-column>
            <el-table-column :label="$t('market.handle')" align="center">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  size="mini"
                  @click="handleDelete(scope.$index)"
                >{{ $t('shop.delete') }}
                </el-button>
              </template>
            </el-table-column>
          </jc-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!--    物料弹窗-->
    <material v-if="isMateria" :qc="prodValue.fcheckouttype" :fid="scFid" @material="materialData" />
    <!--生产订单-->
    <product v-if="productVisiblit" @product="productData" />
    <!--采购订单-->
    <purchase v-if="purchaseVisiblit" @product="purchaseData" />
    <!--发现、责任部门-->
    <responDepart v-if="departVisiblit" @depart="departData" />
    <!--发现、责任人-->
    <responRen v-if="departRenVisiblit" :msg="prodValue.fdutydeptid" @depart="departData1" />
    <!--  数据字典弹窗  -->
    <unit v-if="unitVisabled" :msg="funit" @unit="selUnit" />
  </div>
</template>
<script>
import {
  insertPurCheck
} from '@/api/quality/index'
import jumpMateriel from '@/components/JumpMateriel'
import mixinsImg from '@/views/market/marketManage/createMarkerOrder/components/mixinsImg'
import autocomplete from '@/views/market/marketManage/createMarkerOrder/components/autocomplete'
import { queryViewItem } from '@/api/marketManage/marketOrder'
import responDepart from '@/views/quality/qualityDetail/component/responDepart'
import responRen from '@/views/quality/qualityDetail/component/responRen'
import product from '@/views/quality/qualityDetail/component/product'
import purchase from '@/views/quality/qualityDetail/component/purchase'

export default {
  name: 'QualityDetail',
  components: {
    unit: () => import('@/views/basic/createMateriel2/components/unit'),
    responDepart,
    responRen,
    product,
    material: () => import('@/views/market/marketManage/createMarkerOrder/components/material'),
    purchase,
    numberCode: () => import('@/components/NumberCode')
  },
  mixins: [jumpMateriel, mixinsImg, autocomplete],

  data() {
    return {
      funit: '',
      aotuTab: false,
      fnumber: '',
      activeName: 'first', // 基本信息
      unitVisabled: false, // 字典
      departVisiblit: false, // 责任部门
      departRenVisiblit: false, // 责任人
      productVisiblit: false, // 生产订单
      purchaseVisiblit: false, // 采购订单
      isMateria: false, // 物料
      scFid: 0,
      prodValue: {
        fbilltype: 'OQC检验单',
        fbilltypeId: 186,
        fdate: new Date(),
        fcheckouttype: 'OQC',
        fcheckouttypeid: 186,
        fdutydept: '',
        fdutyer: '',
        fdescription: ''
      }, // 表单数据
      tableHeight: 'calc(100vh - 360px)',
      indexSelf: 0,
      saleDetails: [{
        fqty: 0,
        fmodel: '',
        fpaezText1: '',
        funit: '',
        fmaterialId: 0,
        fspecificaTion: '',
        funitId: 0,
        fstockQty: 0,
        sumInvQty: 0,
        // fprice: 0,
        // ftaxPrice: 0,
        // ftaxRate: 0,
        fdescripTion: '',
        fdeliveryDate: new Date(),
        fnumber: '',
        fentryId: 0,
        fstockUnitId: 0,
        fsupplier: '',
        fworkshop: '',
        fcheckqty: 0,
        fheqty: 0,
        fresult: 190,
        fsrcbillno: '',
        fzedept: ''
      }],
      tableHeader: [],
      pageNum: 1,
      size: 10,
      total: 0,
      gys: '',
      indexDept: -1,
      storeData: [],
      storeData1: [],
      storeData2: [],
      isDisabled: false // 是否禁止输入
    }
  },
  created() {
    this.getBasicUnit() // 检验结果
    this.getBasicUnit1() // 异常原因
    this.getBasicUnit2() // 检验方式
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 290px)' : '66vh'
  },
  methods: {
    // 输入物料编码
    getAtuo(index, fnumber) {
      this.indexSelf = index
      this.aotuTab = true
      var vm = this
      clearTimeout(vm.timer) // 清除未执行的代码，重置回初始化状态
      vm.timer = setTimeout(() => {
        this.fnumber = fnumber
      }, 600)
    },
    // 检验结果 (数据字典公共接口)
    async getBasicUnit() {
      const DATA = { viewName: 'SX_RESULTID' }
      const { data: RES } = await queryViewItem(DATA)
      this.storeData = RES.list
    },
    // 异常原因 (数据字典公共接口)
    async getBasicUnit1() {
      const DATA = { viewName: 'SX_RESULT' }
      const { data: RES } = await queryViewItem(DATA)
      this.storeData1 = RES.list
    },
    // 检验方式 (数据字典公共接口)
    async getBasicUnit2() {
      const DATA = { viewName: 'SX_CHECKWAYID' }
      const { data: RES } = await queryViewItem(DATA)
      this.storeData2 = RES.list
    },
    // 新增品质检验单
    async insert(ev) {
      this.prodValue.details = this.saleDetails
      const DATA = {
        ...this.prodValue,
        fdocumentStatus: ev
      }
      await insertPurCheck(DATA).then(res => {
        if (res.code === 0) {
          this.$router.push({ path: `/qualityDetail/${res.data}` })
          this.saleDetails = []
          this.prodValue = {
            fbilltype: 'OQC检验单',
            fbilltypeId: 186,
            fdate: new Date(),
            fcheckouttype: 'OQC',
            fcheckouttypeid: 186,
            fdutydept: '',
            fdutyer: '',
            fdescription: ''
          }
          // 关闭当前页面
          this.$store.dispatch('tagsView/guanbi', this.$route)
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        }
      })
    },
    // 生产订单
    scOrder(index) {
      this.productVisiblit = true
      this.materielIndex = index
    },
    // 生产订单
    productData(ev) {
      if (ev.fid) {
        const item = this.saleDetails[this.materielIndex]
        item.fsrcbillno = ev.fbillNo
        this.scFid = ev.fid
      }
      this.productVisiblit = false
    },
    // 采购订单
    cgOrder(index) {
      this.purchaseVisiblit = true
      this.materielIndex = index
    },
    // 采购订单
    purchaseData(ev) {
      if (ev.fid) {
        const item = this.saleDetails[this.materielIndex]
        item.fsrcbillno = ev.fbillNo
        this.scFid = ev.fid
      }
      this.purchaseVisiblit = false
    },
    zrdept(index) {
      this.indexDept = index
      this.departVisiblit = true
    },
    // 责任部门
    departData(ev) {
      if (ev.fid && this.indexDept === -1) {
        this.prodValue.fdutydept = ev.fname
        this.prodValue.fdutydeptid = ev.fid
      } else if (ev.fid) {
        const item = this.saleDetails[this.indexDept]
        item.fzedeptid = ev.fid
        item.fzedept = ev.fname
        this.indexDept = -1
      }
      this.departVisiblit = false
    },
    // 责任人
    departData1(ev) {
      if (ev.fuserId) {
        this.prodValue.fdutyer = ev.fname
        this.prodValue.fdutyerid = ev.fuserId
        this.prodValue.fdutydept = ev.fprimaryGroupName
        this.prodValue.fdutydeptid = ev.fuserGroupId
      }
      this.departRenVisiblit = false
    },
    // 数据字典弹窗
    cliUnit(ev, index) {
      this.materielIndex = index
      this.funit = ev
      this.unitVisabled = true
    },
    // 数据字典选中
    selUnit(ev) {
      if (ev.fid) {
        if (this.funit === 'SX_V_WORKSHOP') { // 生产车间
          const item = this.saleDetails[this.materielIndex]
          item.fworkshop = ev.fname
          item.fworkshopid = ev.fid
        }
      }
      this.unitVisabled = false
    },
    // 打开物料弹窗
    materia(index) {
      this.isMateria = true
      this.indexSelf = index
    },
    // 获取物料
    materialData(ev) {
      if (ev.fnumber) {
        const item = this.saleDetails[this.indexSelf]
        item.fmodel = ev.fmodel
        item.fnumber = ev.fnumber
        item.fname = ev.fname
        item.fmaterialId = ev.fmaterialId
        item.fspecificaTion = ev.fspecificaTion
        item.fdescripTion = ev.fdescripTion
        item.funit = ev.funit

        item.fsrcid = ev.fsrcid
        item.fsrcbillno = ev.fsrcbillno
        item.fsrcentryid = ev.fsrcentryid
        item.fsrcentryseq = ev.fsrcentryseq
        item.fsrcbilltype = ev.fsrcbilltype
      }
      this.isMateria = false
    },
    // 表格删除行
    handleDelete(index) {
      this.saleDetails.splice(index, 1)
    },
    // 新增行
    newLine() {
      // const rate = this.saleDetails[0].ftaxRate
      const data = {
        fqty: 0,
        fmodel: '',
        fpaezText1: '',
        funit: '',
        fmaterialId: 0,
        fspecificaTion: '',
        funitId: 0,
        fstockQty: 0,
        sumInvQty: 0,
        fheqty: 0,
        fdescripTion: '',
        fcheckqty: 0,
        fdeliveryDate: new Date(),
        fnumber: '',
        fentryId: 0,
        fstockUnitId: 0,
        fiscost: false,
        fzedeptid: 0,
        fzedept: '',
        fsrcbillno: '',
        fproducefamount: 0
      }
      this.saleDetails.push(data)
    },
    // 单击行
    rowClick(row) {
      this.indexSelf = row.index
    },
    // 删除行
    delHang() {
      this.saleDetails.splice(this.indexSelf, 1)
    },
    // 点击单元格
    cellClick(row, column, cell, event) {
      this.property = column.property
      this.subscript = row.index
    },
    // 批量填充
    batchFill() {
      const item = this.saleDetails[this.subscript][this.property]
      const fworkshopid = this.saleDetails[this.subscript].fworkshopid
      this.saleDetails.map((res, index) => {
        if (index >= this.subscript) {
          res[this.property] = item
          if (this.property === 'fworkshop') {
            res.fworkshopid = fworkshopid
          }
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.editPurchase {
  @include listBom;
  padding: 10px;
  .tabPosit {
    padding: 5px;
    box-shadow: 0 0 2px #aaa;
    position: absolute;
    top: 3.5vh;
    left: 0vw;
    background-color: rgba(255, 255, 255, 1);
    z-index: 99999!important;
  }
  .tabPosit1 {
    padding: 5px;
    box-shadow: 0 0 2px #aaa;
    position: absolute;
    top: -25.69vh;
    left:0vw;
    background-color: rgba(255, 255, 255, 1);
    z-index: 9999;
  }
  .tabs{
    &::v-deep .el-tabs__content {
      min-height: calc(100vh - 180px)
    }
  }
  .el-tabs {
    &::v-deep.el-tabs__header {
      margin: 0 0 5px;
    }
    .el-input::v-deep .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
    .el-form {
      display: flex;
      flex-wrap: wrap;

      .el-form-item {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 35px;
        width: 275px;
        margin-bottom: 2px;
        .btnType{
          margin-right: 20px;
        }
        .el-date-editor.el-input{
          width: 100% !important;
        }
        .el-select{
          width: 100%;
        }
      }
    }
  }
}

.el-input__icon {
  cursor: pointer;
}

</style>
